import Vue from 'vue'
import VueRouter from 'vue-router'

//主页
const Home = () => import('views/Home/Home.vue');
// 用户历史在线阅读记录
const UserOnlineHistry = () => import('views/UserOnlineHistry/UserOnlineHistry.vue');
//详情页
const Details = () => import('views/Details/Details.vue');
// 书籍详情页
const BookDetails = () => import('views/BookDetails/BookDetails.vue');
// 在线阅读
const ReadBook = () => import('views/ReadBook/ReadBook.vue');
// 登录页
const UserLogin = () => import('views/UserLogin/UserLogin.vue');
const UserLoginContentL = () => import('views/UserLogin/UserLoginComponents/UserLoginContent/UserLoginContentL.vue');
const UserLoginContentR = () => import('views/UserLogin/UserLoginComponents/UserLoginContent/UserLoginContentR.vue');
//用户中心
const UserCenter = () => import('views/UserCenter/UserCenter.vue');
//控制中心
const ControlCenter = () => import('views/ControlCenter/ControlCenter.vue');
const ControlCenterBannerUser = () => import('views/ControlCenter/ControlCenterComponents/ControlCenterBannerComponents/ControlCenterBannerUser.vue');
const ControlCenterBannerBooks = () => import('views/ControlCenter/ControlCenterComponents/ControlCenterBannerComponents/ControlCenterBannerBooks.vue');
const ControlCenterBannerComments = () => import('views/ControlCenter/ControlCenterComponents/ControlCenterBannerComponents/ControlCenterBannerComments.vue');
//移动端搜索组件
const MobileSearch = () => import('views/MobileSearch/MobileSearch.vue');

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: '/home',
    component: Home,
  },
  {
    path: '/userOnlineHistry',
    component: UserOnlineHistry,
  },
  {
    path: '/details',
    component: Details,
  },
  {
    path: '/bookDetails',
    component: BookDetails,
    // 延迟等待数据的时间
    beforeEnter: (to, from, next) => {
      setTimeout(() => {
          next();
       }, 300)
     }
  },
  {
    path: '/readBook',
    component: ReadBook,
    beforeEnter: (to, from, next) => {
      if (!localStorage.getItem('onlineReadStyle')) {
        localStorage.setItem('onlineReadStyle', JSON.stringify({
          size: 16,
          color: '#333',
          bgColor: 'rgb(235, 210, 180)'
        }))
      }
      // 延迟进入在线阅读
      setTimeout(() => {
        // 这里将要发送的书籍存放在本地，防止在阅读界面刷新后无法重新拉取数据
        router.app.$options.store.dispatch('asynReadBooks', localStorage.getItem('onlineBooks'));
      }, 100);
      setTimeout(() => {
        if (router.app.$options.store.state.readBooks) {
          next();
        } else {
          alert('请求超时，请重新加载')
        }
      }, 4000);
    }
  },
  {
    path: '/userLogin',
    component: UserLogin,
    // 登录注册子组件
    children: [
      {
        path: "/",
        redirect: "/userLogin/userLoginContentL"
      },
      {
        path: 'userLoginContentL',
        component: UserLoginContentL,
        title: '用户登录'
      },
      {
        path: 'userLoginContentR',
        component: UserLoginContentR,
        title: '用户注册'
      }
    ]
  },
  {
    path: '/userCenter',
    component: UserCenter,
    beforeEnter: (to, from, next) => {
      setTimeout(() => {
        //  在跳转路由前判断用户是否登录
        if (localStorage.getItem('userInformation')) {
          next();
        } else {
          // 用户手动决定是否进行登录注册
          if (confirm('请登录')) {
            next('/userLogin/userLoginContentL');
          }
         }
       }, 800)
     }
  },
  {
    path: '/controlCenter',
    component: ControlCenter,
    beforeEnter: (to, from, next) => {
     setTimeout(() => {
        //  在跳转路由前判断用户是否拥有权限
        if (JSON.parse(localStorage.getItem('userInformation')).root  === 'false') {
          if (confirm('身份过期，请刷新')) {
            window.location.reload();
          }
          next('/userCenter');
        } else {
          // 加载用户
          router.app.$options.store.dispatch('asynGetUserTable');
          // 加载书籍
          router.app.$options.store.dispatch('asynGetBooksTable');
          // 加载评论
          router.app.$options.store.dispatch('asynGetCommentsTable');
          next();
        }
      }, 800)
    },
    // 控制中心子组件
    children: [
      {
        path: '/',
        redirect: '/controlCenter/controlCenterBannerUser'
      },
      {
        path: 'controlCenterBannerUser',
        component: ControlCenterBannerUser,
      },
      {
        path: 'controlCenterBannerBooks',
        component: ControlCenterBannerBooks
      },
      {
        path: 'ControlCenterBannerComment',
        component: ControlCenterBannerComments
      }
    ]
  },
  {
    path: '/mobileSearch',
    component: MobileSearch,
  }
]

const router = new VueRouter({
  routes
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // console.log(router.app.$options.store)  在路由内部获取vuex内容
  router.app.$options.store.commit('clearSearchBooks');

  // 在进入页面时，删除模态框。
  // 防止用户在等待加载在线书籍的时候离开当前路由时造成的页面被模态框背景覆盖且无法进行下一步操作
  $('body').removeClass('modal-open');
  $('div').remove(".modal-backdrop")
  next();
})

export default router
